import React from 'react'
import { ResultPage, Card, Switch,Button } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import { getListApi } from '../../api/jiek'
import { useLoaderData } from 'react-router-dom'
import { Ellipsis, Space } from 'antd-mobile'
function Index() {
  const {list}=useLoaderData()
  return (
    <div>
         <ResultPage
      status=''
      title='火车票预订'
      description='便捷购票，服务您的每一次出行'
    >
      <ResultPage.Card style={{  padding: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center',justifyContent:'space-between',height:'30px'}}>
          <span>北京</span>
          <LoopOutline />
          <span>上海</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center',justifyContent:'space-between',height:'30px'}}>
          <span>2025-5-26  周二（今天）</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center',justifyContent:'space-between',height:'40px'}}>
          <span>只看高铁/动车</span>
          <span>
            <Switch fontSize={10}/>
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center',justifyContent:'space-between',height:'30px'}}>
        <Button block color='primary' size='middle'>
          查询
        </Button>
        </div>
      </ResultPage.Card>

      <Card style={{ marginTop: 12 }}>
        <h3>出行快讯</h3>
        {
          list.map(item=>{
            return <div style={{position:'relative', margin:'10px',width:'100%',height:'50px',display:'flex',justifyContent:'space-between',alignItems:'center',overflow:'hidden'}}>
              <span  >{item.title}</span>
              <span><img src={item.image} alt="" /></span>
            </div>
          })
        }
      </Card>
    </ResultPage>
    </div>
  )
}

export default Index
export const loader= async()=>{
  const {data:res}=await getListApi()
  console.log(res);
  return{list:res}
}
